<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="../css/bootstrap3.3.7.css">
    <link rel="stylesheet" href="../css/floatinglabels.css">
    <script src="../js/jquery2.1.4.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>

    <script>
        $(document).ready(function () {
            //页面大小切换
            function barOffset() {
                var offsetbar = 0;
                if ($(document.body).width() > 1200) {
                    offsetbar = 60;
                } else if ($(document.body).width() > 992) {
                    offsetbar = 0;
                } else {
                    offsetbar = 130;
                }
                return offsetbar;
            }

            //登录注册切换
            $("#login").click(function () {
                $("#login").addClass("lm-tabs-tab-active");
                $("#register").removeClass("lm-tabs-tab-active");
                $("#regsterform").hide();
                $("#register-btn").hide();
                $("#loginform").show();
                $("#login-btn").show();
                loginVue.seen = true;
                loginVue.getCode = "获取验证码";
                loginVue.phoneNumModel = "";
                $("#lcolorbar").css("left", 120 + barOffset() + "px");

            });
            $("#register").click(function () {
                $("#register").addClass("lm-tabs-tab-active");
                $("#login").removeClass("lm-tabs-tab-active");
                $("#loginform").hide();
                $("#login-btn").hide();
                $("#regsterform").show();
                $("#register-btn").show();
                loginVue.regseen = true;
                loginVue.getCode = "获取验证码";
                loginVue.phoneNumModel = "";
                $("#lcolorbar").css("left", 250 + barOffset() + "px");
            });

            $("#register_btn").click(function () {
                if ($("#user_agree").prop("checked")) {
                    if (loginVue.regseen) {
                        $.ajax({
                            url: "/home/register",
                            type: "post",
                            data: $("#regsterform").serialize(),
                            success: function (result) {
                                console.info(result);
                                if (result.code === 500) {
                                    loginVue.backMessage = result.msg;
                                    loginVue.show = true;
                                    setTimeout(function () {
                                        loginVue.show = false;
                                    }, 5000);
                                }
                                if (result.code === 3) {
                                    location.href = "/xingqilin/attest.html";
                                }
                            }
                        })
                    } else {
                        $.ajax({
                            url: "/home/phoneRegister",
                            type: "post",
                            data: $("#regsterform").serialize(),
                            success: function (result) {
                                console.info(result);
                                if (result.code === 500) {
                                    loginVue.backMessage = result.msg;
                                    loginVue.show = true;
                                    setTimeout(function () {
                                        loginVue.show = false;
                                    }, 5000);
                                }
                                if (result.code === 3) {
                                    location.href = "/xingqilin/attest.html";
                                }
                            }
                        })
                    }
                } else {
                    alert("请阅读用户协议并勾选同意！");
                }

            });

            $("#login_btn").click(function () {
                if (loginVue.seen) {
                    $.ajax({
                        url: "/home/login",
                        type: "POST",
                        data: $("#loginform").serialize(),
                        success: function (result) {
                            console.info(result);
                            if (result.code === 500) {
                                loginVue.backMessage = result.msg;
                                console.info(result.msg);
                                loginVue.show = true;
                                setTimeout(function () {
                                    loginVue.show = false;
                                }, 5000);
                            }
                            if (result.code === 3) {
                                location.href = "/xingqilin/attest.html";
                            }
                            if (result.code === 0) {
                                location.href = "/zlz/main.html";
                            }
                        }
                    })
                } else {
                    $.ajax({
                        url: "/home/loginByP",
                        type: "POST",
                        data: $("#loginform").serialize(),
                        success: function (result) {
                            console.info(result);
                            if (result.code === 500) {
                                loginVue.backMessage = result.msg;
                                loginVue.show = true;
                                setTimeout(function () {
                                    loginVue.show = false;
                                }, 5000);
                            }
                            if (result.code === 3) {
                                location.href = "/xingqilin/attest.html";
                            }
                            if (result.code === 0) {
                                location.href = "/zlz/main.html";
                            }
                        }
                    })
                }


            });
        });
    </script>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
        }

        .fade-enter, .fade-leave-to {
            opacity: 0
        }

        .lm-tabs-tab {
            display: inline-block;
            padding: 14px 24px;
            color: #666;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            -webkit-transition: color .24s;
            transition: color .24s;
        }

        .lm-tabs-tab + .lm-tabs-tab {
            margin-left: 48px;
        }

        .lm-tabs-tab-active, .lm-tabs-tab:hover {
            color: #854ec4;
        }

        @media (max-width: 992px) {
            .lm-tabs-nav {
                position: relative;
                text-align: center;
                border-bottom: 2px solid rgb(232, 234, 236);
                width: 700px;
                margin-left: 40px;
            }

            .lm-tabs-ink {
                position: absolute;
                bottom: -2px;
                border-top: 2px solid #854ec4;
                -webkit-transition: left .24s ease-in-out;
                transition: left .24s ease-in-out;
                left: 246px;
                /*left: 376px;*/
                width: 80px;
            }
        }

        @media (min-width: 992px) {
            .lm-tabs-nav {
                position: relative;
                text-align: center;
                border-bottom: 2px solid rgb(232, 234, 236);
                width: 450px;
            }

            .lm-tabs-ink {
                position: absolute;
                bottom: -2px;
                border-top: 2px solid #854ec4;
                -webkit-transition: left .24s ease-in-out;
                transition: left .24s ease-in-out;
                left: 120px;
                /*left: 250px;*/
                width: 80px;
            }
        }

        @media (min-width: 1200px) {
            .lm-tabs-nav {
                position: relative;
                text-align: center;
                border-bottom: 2px solid rgb(232, 234, 236);
                width: 580px;
            }

            .lm-tabs-ink {
                position: absolute;
                bottom: -2px;
                border-top: 2px solid #854ec4;
                -webkit-transition: left .24s ease-in-out;
                transition: left .24s ease-in-out;
                left: 180px;
                /*left: 250px;*/
                width: 80px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <blockquote>
                <p>
                    想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。
                </p> <small>Arnold Schwarzenegger <cite>(施瓦辛格)</cite></small>
            </blockquote>
            <div class="text-center mb-4">
                <img class="mb-4" src="../images/Hifit.svg" width="72" height="72">
                <h1 class="h3 mb-3 font-weight-normal">Hifit</h1>
                <p>Build form controls with floating labels </p>
            </div>
        </div>
        <div class="col-md-6 column">
            <div class="lm-tabs-nav">
                <div id="login" class="lm-tabs-tab lm-tabs-tab-active" data-key="0">登录</div>
                <div id="register" class="lm-tabs-tab" data-key="1">注册</div>
                <div id="lcolorbar" class="lm-tabs-ink"></div>
            </div>
            <div id="myTabContent" class="form-signin tab-content">
                <transition name="fade">
                    <div v-show="show" class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" @click="errorMsg">&times;</button>
                        <strong>错误!</strong> {{backMessage}}
                    </div>
                </transition>
                <!--                登录页面账号密码-->
                <form class="form-signin" id="loginform" onsubmit="return false;">

                    <div class="checkbox mb-3" style="text-align: center;color: #260a5d;font-size: 15px;">
                        <a @click="useracclogin">账号登录</a> | <a @click="userphologin">验证登录</a>
                    </div>

                    <div v-if="seen">
                        <div class="form-label-group">
                            <input type="text" class="form-control" placeholder="Account" required
                                   autofocus name="account">
                            <label>账号/手机/邮箱：</label>
                        </div>
                        <div class="form-label-group">
                            <input type="password" id="inputPassword" class="form-control" placeholder="Password"
                                   required
                                   name="pwd">
                            <label>密码：</label>
                        </div>
                    </div>
                    <div v-if="!seen">
                        <div class="form-label-group">
                            <input type="text" id="phone_acc" class="form-control" placeholder="Account" required
                                   autofocus name="phoneLogNum" v-model="phoneNumModel">
                            <label>手机号：</label>
                        </div>
                        <div class="form-label-group">
                            <button class="btn btn-lg btn-primary" style="float: right;width: 160px;"
                                    @click="getCodeBtn">{{getCode}}
                            </button>
                            <input type="text" class="form-control" placeholder="Password" required
                                   name="logCode" style="width: 170px">
                            <label>验证码：</label>
                        </div>
                    </div>
                    <div class="checkbox mb-3">
                        <label>
                            <input type="checkbox" name="remember"> Remember me
                        </label>
                    </div>

                </form>
                <div id="login-btn">
                    <button id="login_btn" class="btn btn-lg btn-primary btn-block" type="submit">登 录</button>
                    <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
                </div>
                <!--                注册页面-->
                <form class="form-signin" id="regsterform" style="display: none" onsubmit="return false;">
                    <div class="checkbox mb-3" style="text-align: center;color: #260a5d;font-size: 15px;">
                        <a @click="regaccount">账号注册</a> | <a @click="regphone">手机注册</a>
                    </div>
                    <div v-if="regseen">
                        <div class="form-label-group">
                            <input type="text" class="form-control" placeholder="Account" required
                                   autofocus name="account">
                            <label>账号：</label>
                        </div>
                        <div class="form-label-group">
                            <input type="password" class="form-control" placeholder="Account" required
                                   autofocus name="pwd">
                            <label>密码：</label>
                        </div>
                    </div>
                    <div v-if="!regseen">
                        <div class="form-label-group">
                            <input type="text" class="form-control" placeholder="Account" required
                                   autofocus name="phoneNum" v-model="phoneNumModel">
                            <label>手机号：</label>
                        </div>
                        <div class="form-label-group">
                            <button class="btn btn-lg btn-primary" style="float: right;width: 160px;"
                                    @click="getRegCodeBtn">{{getCode}}
                            </button>
                            <input type="text" class="form-control" placeholder="Password" required
                                   name="myCode" style="width: 170px">
                            <label>验证码：</label>
                        </div>
                    </div>

                    <div class="checkbox mb-3">
                        <label>
                            <input id="user_agree" type="checkbox" value="remember-me"> 我已阅读并同意<a
                                href="https://www.w3cschool.cn/webagreement" target="_blank">《用户注册协议》</a>
                        </label>
                    </div>
                </form>
                <div id="register-btn" style="display: none">
                    <button id="register_btn" class="btn btn-lg btn-primary btn-block" type="submit">注 册</button>
                    <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/bootstrap3.3.7.js"></script>
<script>
    var loginVue = new Vue({
        el: '#myTabContent',
        data: {
            seen: true,
            regseen: true,
            totalTime: 10,
            regTotalTime: 10,
            getCode: "获取验证码",
            canClick: true,
            regCanClidk: true,
            phoneNumModel: "",
            show: false,
            backMessage: '',
        },
        methods: {
            //账号手机方式切换
            useracclogin() {
                this.seen = true;
            },
            userphologin() {
                this.seen = false;
            },
            regaccount() {
                this.regseen = true;
            },
            regphone() {
                this.regseen = false;
            },
            //    获登录取验证码事件
            getCodeBtn() {
                if (!this.canClick) {
                    return false;
                } else {
                    let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                    if (!reg.test(this.phoneNumModel)) {
                        loginVue.backMessage = "手机号有误，请检查手机号";
                        loginVue.show = true;
                        setTimeout(function () {
                            loginVue.show = false;
                        }, 5000);
                        return false;
                    }
                    axios.get("/home/getCode", {
                        params: {
                            phoneLogNum: this.phoneNumModel,
                            getType: true,//登录判断字段
                        }
                    }).then(function (result) {
                        console.info(result.data);
                        if (result.data.code === 500) {
                            loginVue.backMessage = result.data.msg;
                            loginVue.show = true;
                            setTimeout(function () {
                                loginVue.show = false;
                            }, 5000);
                        }
                    })
                }
                this.canClick = false;
                this.getCode = this.totalTime + 's后重发';
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    this.getCode = this.totalTime + 's后重发';
                    if (this.totalTime < 0) {
                        window.clearInterval(clock);
                        this.getCode = '重新发送验证码';
                        this.totalTime = 10;
                        this.canClick = true;   //这里重新开启
                    }
                }, 1000);

            },
            //获取注册验证码
            getRegCodeBtn() {
                if (!this.regCanClidk) {
                    return false;
                } else {
                    let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                    if (!reg.test(this.phoneNumModel)) {
                        loginVue.backMessage = "手机号有误，请检查手机号";
                        loginVue.show = true;
                        setTimeout(function () {
                            loginVue.show = false;
                        }, 5000);
                        return false;
                    }
                    axios.get("/home/getCode", {
                        params: {
                            phoneLogNum: this.phoneNumModel,
                            getType: false,//注册判断自段
                        }
                    })
                        .then(function (result) {
                            console.info(result.data);
                            if (result.data.code === 500) {
                                loginVue.backMessage = result.data.msg;
                                loginVue.show = true;
                                setTimeout(function () {
                                    loginVue.show = false;
                                }, 5000);
                            }
                        })
                }
                this.regCanClidk = false;
                this.getCode = this.regTotalTime + 's后重发';
                let clock = window.setInterval(() => {
                    this.regTotalTime--;
                    this.getCode = this.regTotalTime + 's后重发';
                    if (this.regTotalTime < 0) {
                        window.clearInterval(clock);
                        this.getCode = '重新发送验证码';
                        this.regTotalTime = 10;
                        this.regCanClidk = true;   //这里重新开启
                    }
                }, 1000);
            },
            // 关闭信息提示
            errorMsg() {
                // this.show = false;
                // setTimeout(function(){loginVue.show = false;}, 5000);

                this.show = false;

            },
            //移除计时器
            beforeDestroy() {
                clearTimeout(this.timer);
            }

        }
    })
</script>
</body>
</html>